<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<!-- 引入 ECharts 文件 -->  
<script src="${basePath}/js/echarts.js"></script>  
<script src="${basePath}/js/dark.js"></script>  
<script src="${basePath}/js/echarts.min.js"></script>  
<script src="${basePath}/js/macarons.js"></script>  
<script src="${basePath}/js/roma.js"></script>  
<script src="${basePath}/js/shine.js"></script>  
<script src="${basePath}/js/vintage.js"></script>
<script src="${basePath}/js/jquery.min.js"></script>    
<body>
	<div id="main" style="width: 100%;height:800px;"></div>
	<script type="text/javascript">
		var path = "${basePath}";
		var myChart = echarts.init(document.getElementById('main'));
		// 显示标题，图例和空的坐标轴
		myChart.setOption({
	    	title: {
	        	text: '分类销售图'
	    	},
	    	tooltip: {},
	    	legend: {
	        	data:['销量']
	    	},
	    	xAxis: {
	        	data: []
	    	},
	    	yAxis: {},
	    	series: [{
	        	name: '销量',
	        	type: 'bar',
	        	data: []
	    	}]
		});

		// 异步加载数据
		$.get(path+'/report/cate').done(function (data) {
	    	// 填入数据
	    	myChart.setOption({
	        	xAxis: {
	            	data: data.xAxis
	        	},
	        	series: [{
	            	// 根据名字对应到相应的系列
	            	name: '销量',
	            	data: data.series
	        	}]
	    	});
		});
    </script>
</body>
</html>